<template>
    <!-- 头部区域 -->
    <div class="header">
        <div class="header-container">
            <!-- Logo -->
            <div class="logo" @click="backStore()">
                <h1 class="logo-text">SHHM交易</h1>
            </div>

            <!-- 搜索区域 -->
            <div class="search-area">
                <el-input 
                    v-model="searchKeyword" 
                    placeholder="请输入商品名称" 
                    class="search-input" 
                    size="large"
                    @keyup.enter="handleSearch">
                    <template #append>
                        <el-button :icon="Search" @click="handleSearch" />
                    </template>
                </el-input>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 定义 emit 事件
const emit = defineEmits(['search'])

// 搜索关键字
const searchKeyword = ref('')

// 处理搜索
const handleSearch = () => {
    if (searchKeyword.value.trim()) {
        // ElMessage.success(`搜索: ${searchKeyword.value}`)
        // 触发搜索事件，传递搜索关键字
        emit('search', searchKeyword.value)
    } else {
        ElMessage.warning('请输入搜索关键字')
    }
}

const backStore = () => {
    window.location.href = '/store'
}
</script>

<style scoped>
/* 头部样式 */
.header {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

/* Logo区域 */
.logo {
    margin-bottom: 15px;
    flex-shrink: 0;
}

.logo-text {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(135deg, #9faef1 0%, #8be397 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    cursor: pointer;
}

/* 搜索区域 */
.search-area {
    flex: 1;
    max-width: 500px;
    margin-left: 30px;
}

.search-input {
    border-radius: 20px;
}

:deep(.search-input .el-input-group__append) {
    border-radius: 0 20px 20px 0;
    background-color: #409EFF;
    border-color: #409EFF;
}

:deep(.search-input .el-button) {
    color: white;
}
</style>